<template>
  <view class="home">
    <view class="home-title">
      <text class="title">AI-NOTEBOOK</text>
    </view>
    <view class="search-bar">
      <uni-search-bar
        placeholder="搜索备忘录"
        v-model="searchValue"
        :radius="8"
        cancelButton="none"
        bgColor="#fff"
        @input="handleSearchInput"
      />
    </view>
    
    <view class="quick-actions">
      <QuickAction 
        icon="mic" 
        text="AI小助手" 
        color="#7986CB"
        bgColor="linear-gradient(135deg, rgba(121,134,203,0.1) 0%, rgba(121,134,203,0.2) 100%)"
        @click="handleClickMic"
        data-type="voice"
      />
      <QuickAction 
        icon="scan" 
        text="文本扫描" 
        color="#4DD0E1"
        bgColor="linear-gradient(135deg, rgba(77,208,225,0.1) 0%, rgba(77,208,225,0.2) 100%)"
        @click="handleClickScan"
        data-type="scan"
      />
      <QuickAction 
        icon="plusempty" 
        text="新增笔记" 
        color="#42A5F5"
        bgColor="linear-gradient(135deg, rgba(66,165,245,0.1) 0%, rgba(66,165,245,0.2) 100%)"
        @click="handleComposeClick"
        data-type="add"
      />
    </view>

    <view class="notes-section">
      <text class="section-title">最近笔记</text>
      <view class="notes-list">
        <NoteItem 
          v-for="note in notes" 
          :key="note.id" 
          :title="note.title" 
          :summary="note.summary" 
          :lastEditTime="note.lastEditTime"
          @edit="handleEditNote(note.id)"
        />
      </view>
    </view>
    
    <BottomNav activeTab="home" />
  </view>
</template>

<script>
import BottomNav from '@/components/BottomNav.vue'
import HeaderBar from '@/components/HeaderBar.vue'
import QuickAction from '@/components/QuickAction.vue'
import NoteItem from '@/components/NoteItem.vue'

export default {
  components: { BottomNav, HeaderBar, QuickAction, NoteItem },
  data() {
    return {
      notes: [],
      filteredNotes: [],
      loading: false,
      error: null,
      searchValue: ''
    }
  },
  watch: {
    searchValue(newVal) {
      this.filterNotes(newVal)
    }
  },
  onLoad() {
    this.fetchNotes()
  },
  methods: {
    async fetchNotes() {
      this.loading = true
      this.error = null
      
      try {
        const response = await import('@/test/mockNotes.json')
        this.notes = response.default.map(note => ({
          id: note.id,
          title: note.title || '无标题',
          content: note.content || '无内容',
          date: note.date || '未知时间',
          summary: note.content ? note.content.substring(0, 50) : '无摘要',
          lastEditTime: note.date || new Date().toLocaleString()
        }))
      } catch (error) {
        console.error('Failed to load notes:', error)
        this.error = '加载笔记失败'
        uni.showToast({
          title: '加载笔记失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    handleClickMic() {
      
    },
    handleClickScan() {
      
    },
    handleComposeClick() {
      uni.navigateTo({
        url: '/pages/note/add'
      });
    },
    handleEditNote(noteId) {
      uni.navigateTo({
        url: `/pages/note/detail?id=${noteId}`
      });
    },
    filterNotes(searchTerm) {
      if (!searchTerm) {
        this.filteredNotes = this.notes
        return
      }
      const lowerCaseTerm = searchTerm.toLowerCase()
      this.filteredNotes = this.notes.filter(note => 
        note.title.toLowerCase().includes(lowerCaseTerm) ||
        note.content.toLowerCase().includes(lowerCaseTerm)
      )
    },
    handleSearchInput(event) {
      this.searchValue = event.detail.value
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/static/scss/home.scss';
</style>
